<template>
  <div class="w-full h-20 flex fixed">
    <div class="bg-indigo-500 w-72"></div>
    <div class="bg-indigo-500 flex-grow w-16 flex flex-row items-center">
      <div class="cursor-pointer ml-10 w-16 text-white" @click="gotoIndex">
        首页
      </div>
      <div class="cursor-pointer w-16 text-white">论坛</div>
      <div class="cursor-pointer w-16 text-white">关于</div>
      <div class="cursor-pointer w-20 text-white">联系我们</div>
      <el-popover placement="top-start" title="标题" trigger="hover">
        <button class="bg-gray-800">Hello</button>
        <el-button slot="reference">hover 激活</el-button>
      </el-popover>
    </div>
    <div class="bg-indigo-500 w- w-5/12 flex items-center">
      <!-- 搜索框 -->
      <div class="flex flex-row space-x-3">
        <input
          class="
            border border-transparent
            focus:outline-none
            focus:ring-2 focus:ring-purple-600
            focus:border-transparent
            rounded-md
            shadow-md
            placeholder-purple-400
          "
          placeholder="搜索"
        />
        <button
          class="
            bg-purple-600
            hover:bg-purple-700
            focus:outline-none
            focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50
            rounded-md
            shadow-md
            px-3
            py-1
            text-white
          "
        >
          搜索
        </button>
      </div>
      <div
        class="
          block
          ml-8
          shadow-2xl
          rounded-full
          w-16
          h-16
          flex
          items-center
          justify-center
        "
      >
        <el-avatar :size="50" :src="avatar"></el-avatar>
      </div>
      <p class="cursor-pointer ml-3 text-white" @click="gotoUserInfo">
        {{ $store.state.userInfo.nowUserNickname || "登陆" }}
      </p>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
export default {
  name: "Navbar",
  data() {
    return {
      avatarUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  computed: {
    avatar: function () {
      return this.$store.state.userInfo.nowUserAvatar;
    },
  },
  methods: {
    gotoIndex: function () {
      this.$router.push("/");
    },
    //单击用户名的事件
    gotoUserInfo() {
      if (this.$store.state.userInfo.nowUserId == 0) {
        this.$router.push("/loginpage/login")
      }
    },
  },
  //接收父亲的数据
  // props: {
  //   nickName: String,
  //   avatar: String
  // },
};
</script>
<style scoped>
.myshadow {
  border-radius: 50px;
  background: rgba(99, 102, 241, var(--tw-bg-opacity));
  box-shadow: 5px 5px 16px #5e5e5e, -5px -5px 16px #ffffff;
}
</style>